<!-- eslint-disable vue/multi-word-component-names -->
<!-- Link.vue 是一个智能链接包装器，根据目标路径是否为外链自动选择正确的链接渲染方式。 -->
<script setup lang="ts">
import { isExternal } from '@/common/utils/validate'

interface Props {
  to: string
}

const props = defineProps<Props>()
</script>

<template>
  <!-- 外链使用原生a标签   -->
  <!-- 使用 target="_blank" 在新标签页打开,添加 rel="noopener" 防止安全漏洞 -->
  <!-- 比如点击中文文档后的跳转 -->
  <a
    v-if="isExternal(props.to)"
    :href="props.to"
    target="_blank"
    rel="noopener"
  >
    <slot></slot>
  </a>
  <!-- 使用 Vue Router 的 <router-link> 实现无刷新导航,保持 SPA 体验 -->
  <router-link v-else :to="props.to">
    <slot />
  </router-link>
</template>

<style lang="scss" scoped></style>
